import React from 'react'

/*
* @param {Number} percent 百分比
* @param {Number} size svg宽高
* @param {Number} bar_width 圆线的宽度
* @param {Number} round 圆的弧度
*/

class ProcessIcon extends React.Component {
    static defaultProps = {
        percent: 0,
        size: 140,
        bar_width: 10,
        round: 65,
    }
    constructor(props) {
        super(props)
    }

    render() {
        let {
            percent,
            size,
            bar_width,
            round,
            className
        } = this.props

        if (percent > 100) {
            percent = 100
        } else if (percent < 0) {
            percent = 0
        }
        percent = percent * round / 100

        const r = (size - bar_width * 2) / 2

        const PAI = 3.14

        return (
            <div className={className} style={{ transform: [`rotate(144deg)`] }}>
                <svg class="svg" width={size} height={size}>
                    <defs>
                        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="50%" stop-color="#85CBFF" />
                            <stop offset="100%" stop-color="#1778FD" />
                        </linearGradient>
                    </defs>

                    <circle
                        r={r}
                        cy={size / 2}
                        cx={size / 2}
                        stroke="#e9f4ff"
                        strokeWidth={bar_width}
                        strokeLinecap="round"
                        strokeDasharray={(size - bar_width) * PAI}
                        strokeDashoffset={((size - bar_width) * PAI * (100 - round)) / 100}
                        fill="none"
                    />
                    <circle
                        r={r}
                        cy={size / 2}
                        cx={size / 2}
                        stroke="url(#grad)"
                        strokeWidth={bar_width}
                        strokeLinecap="round"
                        strokeDasharray={(size - bar_width) * PAI}
                        strokeDashoffset={((size - bar_width) * PAI * (100 - percent)) / 100}
                        fill="none"
                    />
                </svg>
            </div>
        )
    }
}

export default ProcessIcon